<template>
  <div class="recruit-info">
    <h2>点餐设置</h2>
    <div class="edit-content">
      <div class="edit-order-type">
        <h3>点餐类型（饭、粥...）</h3>
        <p class="empty-pos" v-show="!allOrderType.length">小主，暂无点餐类型，新增一个试试～～</p>
        <ul class="order-type" v-show="allOrderType.length">
          <li v-for="(item,index) in allOrderType">
            <span class="type-name">{{item.value}}</span>
            <div class="type-action">
              <Button type="error"
                      style="margin-right: 20px;"
                      @click="showDelTypeModal(item)"
              >删除
              </Button>
              <Switch
                size="large"
                v-model="switchValueArr[index]"
                @on-change="changeTypeStatus({item,index})"
              >
                <span slot="open">开启</span>
                <span slot="close">禁用</span>
              </Switch>
            </div>
          </li>
        </ul>
        <div>
          <Button
            type="primary"
            icon="android-add"
            class="mtb20"
            @click="showAddTypeModal"
          >新增点餐类型
          </Button>
        </div>
      </div>
      <div class="edit-order-time">
        <h3>时间段设置</h3>
        <ul class="time-content">
          <li>
            <label>上午</label>
            <TimePicker confirm
                        :value="timeConfigArr[0]"
                        @on-change="amOk"
                        :disabled="!timeConfigEditable"
                        :disabled-hours="[13,14,15,16,17,18,19,20,21,22,23,24]"
                        hide-disabled-options
                        type="timerange"
                        placement="bottom-end"
                        placeholder="选择上午时间段">
            </TimePicker>
          </li>
          <li>
            <label>下午</label>
            <TimePicker confirm
                        :value="timeConfigArr[1]"
                        @on-change="pmOk"
                        :disabled="!timeConfigEditable"
                        :disabled-hours="[0,1,2,3,4,5,6,7,8,9,10,11,12]"
                        hide-disabled-options
                        type="timerange"
                        placement="bottom-end"
                        placeholder="选择下午时间段">
            </TimePicker>
          </li>
        </ul>
        <div>
          <Button
            type="primary"
            icon="android-add"
            class="mtb20"
            @click="editTimeConfig"
          >{{timeConfigWords[timeConfigWordIndex]}}
          </Button>
        </div>
      </div>
      <div class="edit-notice">
        <h3>公告</h3>
        <textarea
          v-model="noticeContent"
          class="notice-content"
          :disabled="!contentEditable"
          :class="{'notice-content-active':contentEditable,'bg-disable':!contentEditable}"
        ></textarea>
        <div>
          <Button
            type="primary"
            class="mtb20"
            @click="editNotice"
          >{{noticeWord[noticeWordIndex]}}
          </Button>
        </div>
      </div>
    </div>
    <div class="phone-simulation-wrapper">
      <div class="sim-img">
        <div class="phone-content">
          <div class="order-main-page">
            <h3 class="title">点餐</h3>
            <div class="img-notice-content" v-show="noticeContent">
              <Icon type="ios-bell"/>
              {{noticeContent}}
            </div>
            <div class="name">
              <Input prefix="ios-contact"
                     v-model="simUsername"
                     placeholder="请输入姓名(必填项)"
                     size="large"
                     style="width: auto"/>
            </div>
            <div class="order-types">
              <p>请选择类型（单选/必填项）</p>
              <RadioGroup vertical
                          size="large"
                          class="radio-group">
                <Radio
                  v-for="(item,index) in simAllOrderType"
                  :label="item.value"
                  :key="index"
                >
                  <span>{{item.value}}</span>
                </Radio>
              </RadioGroup>
            </div>
            <div class="suggest">
              <Input type="textarea"
                     placeholder="请输入备注"
                     :rows="4"
              />
            </div>
            <div class="submit">
              <Button type="success"
                      size="large"
                      long
              >SUBMIT
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
  </div>
</template>

<script>
  import $cache from '../../../utils/cache'

  export default {
    data() {
      return {
        simUsername: '',
        simAllOrderType: [],
        modalInputValue: '',
        allOrderType: [],
        switchValueArr: [],
        noticeWord: ['保存', '重新编辑'],
        noticeWordIndex: 1,// 对应着上面 noticeWord 中元素的序号
        contentEditable: false,
        noticeContent: '',// 公告信息
        timeConfigWords: ['保存', '重新设置'],
        timeConfigWordIndex: 1,// 同上
        timeConfigEditable: false,// 能否重新设置时间段
        timeConfigArr: [['', ''], ['', '']],
        orderBasicConfigInfo: {}, //基本配置信息
      }
    },
    methods: {
      showAddTypeModal() {
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.modalInputValue,
                autofocus: true,
                placeholder: '请输入点餐品种名...',
              },
              on: {
                input: (val) => {
                  this.modalInputValue = val;
                },
                click: () => {
                  alert(9)
                }
              }
            })
          },
          onOk: () => {
            this.addOrderType()
          },
          loading: true
        })
      },
      showDelTypeModal(item) {
        this.$Modal.error({
          content: '确定删除该点餐类型么？',
          closable: true,
          onOk: this.delOrderType.bind(this, item)
        })
      },
      // 提交order info 0 新增 1禁用/开启 2删除
      addOrderType() {
        let data = {
          type: 0,
          value: this.modalInputValue
        };
        if (!this.modalInputValue) {
          this.$Message.error({
            content: '输入为空，请重新输入',
            onClose: this.$Modal.remove()
          });
          return false
        }
        this.$axios.post(this.$store.getters.getUrl('saveOrderType'), data).then(res => {
          if (res.data.error_code === 0) {
            this.$Message.success({
              content: res.data.msg,
              onClose: () => {
                this.$Modal.remove();
                this.getAllOrderType()
              }
            })
          } else if (res.data.error_code === 10005) {
            this.$Message.success({
              content: res.data.msg,
              onClose: this.$Modal.remove()
            })
          } else {
            this.$Message.success({
              content: '网络错误，请重试',
              onClose: this.$Modal.remove()
            })
          }
        })
      },
      delOrderType(item) {
        let data = {
          type: 2,
          value: item.value
        };

        this.$axios.post(this.$store.getters.getUrl('saveOrderType'), data).then(res => {
          if (res.data.error_code === 0) {
            this.$Message.success({
              content: res.data.msg,
            });
            this.getAllOrderType()
          } else {
            this.$Message.success({
              content: '网络错误，请重试',
            })
          }
        })
      },
      getAllOrderType() {
        this.$axios.post(this.$store.getters.getUrl('getAllOrderType')).then(res => {
          if (res.data.error_code === 0) {
            this.allOrderType = res.data.data;
            this.simAllOrderType = this.allOrderType.filter(item => item['openStatus']);
            this.switchValueArr = this.allOrderType.map(item => item['openStatus'])
          } else {
            alert(res.data.msg)
          }
        })
      },
      changeTypeStatus(obj) {
        let {item, index} = obj, data;

        this.$set(this.switchValueArr, obj[index], !this.switchValueArr[index]);

        data = {
          type: 1,
          value: item.value,
          openStatus: this.switchValueArr[index]
        };

        this.$axios.post(this.$store.getters.getUrl('saveOrderType'), data).then(res => {
          if (res.data.error_code === 0) {
            this.$Message.success({
              content: res.data.msg,
            });
            this.getAllOrderType()
          } else {
            this.$Message.success({
              content: '网络错误，请重试',
            })
          }
        })
      },
      editNotice() {
        (this.noticeWordIndex === 0) && this.saveAllOrderBasicConfig('noticeContent').then(() => {
          this.noticeWordIndex = [0, 1].filter(item => item !== this.noticeWordIndex)[0];
          this.contentEditable = (this.noticeWordIndex === 0);
        });
        (this.noticeWordIndex === 1) && (this.noticeWordIndex = [0, 1].filter(item => item !== this.noticeWordIndex)[0],
          this.contentEditable = (this.noticeWordIndex === 0))
      },
      editTimeConfig() {
        (this.timeConfigWordIndex === 0) && this.saveAllOrderBasicConfig('timeConfigArr').then(() => {
          this.timeConfigWordIndex = [0, 1].filter(item => item !== this.timeConfigWordIndex)[0];
          this.timeConfigEditable = (this.timeConfigWordIndex === 0);
        });
        (this.timeConfigWordIndex === 1) && (this.timeConfigWordIndex = [0, 1].filter(item => item !== this.timeConfigWordIndex)[0],
          this.timeConfigEditable = (this.timeConfigWordIndex === 0))
      },
      getAllOrderBasicConfig() {
        this.$axios.post(this.$store.getters.getUrl('getOrderBasicConfig')).then(res => {
          if (res.data.error_code === 0) {
            this.orderBasicConfigInfo = res.data.data;
            this.noticeContent = this.orderBasicConfigInfo['noticeContent'];
            this.timeConfigArr = this.orderBasicConfigInfo['timeConfigArr']
          }
        })
      },
      saveAllOrderBasicConfig(type) {
        // 区分保存公告、时间设置
        let data;
        switch (type) {
          case 'noticeContent':
            data = {
              noticeContent: this.noticeContent,
            };
            if (!this.noticeContent) {
              this.$Message.warning({
                content: '确定不填写具体公告信息么？'
              })
            }
            break;
          case 'timeConfigArr':
            data = {
              timeConfigArr: this.timeConfigArr
            };
            break
        }

        return new Promise((resolve, reject) => {
          this.$axios.post(this.$store.getters.getUrl('saveOrderBasicConfig'), data).then(res => {
            if (res.data.error_code === 0) {
              this.$Message.success({
                content: res.data.msg,
              });
              resolve()
            } else {
              reject(res.data.msg)
            }
          }).catch((err) => {
            reject(err)
          })
        })
      },
      amOk(time) {
        this.timeConfigArr[0] = time
      },
      pmOk(time) {
        this.timeConfigArr[1] = time
      }
    },
    created() {
      this.getAllOrderType();
      this.getAllOrderBasicConfig();
    },
    mounted() {
      this.$store.dispatch('setBreadcrumbInfo', [{name: '点餐'},
        {name: '设置', routeName: 'GraphDetail'}])
    }
  }
</script>

<style lang='less' type='text/less' scoped>
  .recruit-info {
    /*min-height: 1000px;*/
    padding: 0 24px 24px;
    background-color: #fff;
    h2 {
      height: 60px;
      line-height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px #ddd dashed;
    }
    h3 {
      height: 40px;
      line-height: 40px;
    }
    .mtb20 {
      margin: 20px 0;
    }
    .bg-disable {
      background-color: #f9f9f9;
    }
    .edit-content {
      float: left;
      width: 48%;
      .edit-order-type {
        border-bottom: 1px #ddd dashed;
        .order-type {
          padding: 30px 10px;
          background-color: #ecf0f5;
          > li {
            min-height: 50px;
            line-height: 50px;
            border-bottom: 1px #ddd dashed;
          }
          .type-name {
            padding: 10px;
            border-radius: 4px;
            color: #fff;
            background-color: #13c0ff;
          }
          .type-action {
            float: right;
            .type-del {
              padding: 5px 15px;
              border-radius: 4px;
              color: #fff;
              background-color: #ed4014;
            }
          }
        }
      }
      .edit-notice {
        margin-top: 20px;
        border-bottom: 1px #ddd dashed;
        .notice-content {
          width: 100%;
          min-height: 200px;
          padding: 20px 10px;
          font-size: 16px;
          border-radius: 5px;
          border: 1px #ddd solid;
          color: #000;
        }
        .notice-content-active {
          outline: none;
          box-shadow: 0 0 5px 1px #45d5ff;
        }
      }
      .edit-order-time {
        margin-top: 20px;
        border-bottom: 1px #ddd dashed;
        .time-content {
          li {
            padding: 10px 0;
          }
          label {
            margin-right: 50px;
            vertical-align: middle;
            font-size: 14px;
            font-weight: bold;
            color: #000;
          }
        }
      }
    }
    .phone-simulation-wrapper {
      float: right;
      width: 50%;
      min-height: 500px;
      border-left: 1px #ddd dashed;

      .sim-img {
        height: 792px;
        width: 365px;
        margin: 0 auto;
        padding: 90px 30px 80px;
        background: #fcfcfc url("../../../assets/images/phone-simulation.png") no-repeat center top;
        background-size: 90%;
      }
      .phone-content {
        height: 522px;
        overflow: auto;
        width: 100%;
        background-color: #fff;
        .order-main-page {
          .title {
            height: 50px;
            line-height: 50px;
            text-align: center;
          }
          .name {
            margin: 10px;
          }
          .img-notice-content {
            margin: 10px;
            padding: 5px 0;
            word-break: break-all;
            font-size: 14px;
            background-color: #fafafa;
          }
          .order-types {
            > p {
              margin: 40px 0 10px 10px;
            }
          }
          .radio-group {
            width: 100%;
            padding: 10px 20px;
            background-color: #fafafa;
          }
          .suggest {
            margin: 20px 10px;
            background-color: #fafafa;
          }
          .submit {
            margin: 40px 10px;
          }
        }
      }
    }
    .empty-pos {
      height: 80px;
      line-height: 80px;
      margin: 20px auto;
      text-align: center;
      font-size: 18px;
      background-color: #f8f8f8;
    }
  }
</style>
